<html>
<title>snake</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
	<script src="main.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="jquery.js"></script>
	<script>
		$(document).ready(function(){
			$(".apple").hide();
			$(".body").hide();
			$(".head").hide();
			if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) 
			{
				$("#control").show();
			}
			else
			{	
				$("#control").hide();
			}
		})

		function charge()
		{
			for (var k=1;k<=3;k++)
			{
				temp_apple="apple"+k;
				if (body1.style.left==document.getElementById(temp_apple).style.left && body1.style.top==document.getElementById(temp_apple).style.top)
				{
					var temp_left=eval("body"+body_number).style.left;
					var temp_top=eval("body"+body_number).style.top;
					for (var m=5;m<=body_number;m++)
					{
						if (document.getElementById(temp_apple).style.backgroundColor==document.getElementById(("body"+m)).style.backgroundColor)
						{
							var temp_m=m;
							setTimeout(function(){
								for (var i=temp_m;i<=body_number;i++)
								{
									var i1=i-temp_m+1+status_number;
									eval("$('#body"+i+"').attr('id','status"+i1+"')");
								}
								status_number+=(body_number-temp_m+1);
								body_number=temp_m-1;
							},1000)
						}
					}
					body_number++;
					$("#canvas").append("<div id=\"body"+body_number+"\" class=\"body\" style=\"left:"+temp_left+";top:"+temp_top+";background-color:"+document.getElementById(temp_apple).style.backgroundColor+"\"></div>");
					apple(temp_apple);
				}
			}
			for (var i=2;i<=body_number;i++)
			{
				if (body1.style.left==eval("body"+i).style.left && body1.style.top==eval("body"+i).style.top)
				{
					over();
					move_permission=0;
				}
			}
			for (var i=1;i<=status_number;i++)
			{
				if (body1.style.left==eval("status"+i).style.left && body1.style.top==eval("status"+i).style.top)
				{
					over();
					move_permission=0;
				}
			}
			if (parseInt(body1.style.left)<0 || parseInt(body1.style.left)>=1120 || parseInt(body1.style.top)<0 || parseInt(body1.style.top)>=630)
			{
				over();
				move_permission=0;
			}
		}

		function begin()
		{
			setTimeout(function(){
				$("#play").hide();
				$(".apple").fadeIn();
				$(".body").show();
				$(".head").show();				
			},500)
			$("#play").css({
				"height":"35px",
				"borderRadius":"18px 0px 0px 18px",
				"color":"#00cc47",
				"fontSize":"0px",
			})
		}

		function over()
		{
			$("#play").show();
			$(".body").hide();
			$(".head").hide();
			$(".apple").hide();
			$("#play").css({
				"height":"50px",
				"color":"#fff",
				"fontSize":"30px",
				"borderRadius":"18px",
			})
			$("#text").text("LOSE")
			$("#play").click(function(){
				location.reload();
			})
		}
	</script>
</head>
<body style="background-color:#eee">
	<div id="canvas" class="canvas">
		<div id="apple1" class="apple" style="left:35px;top:35px"></div>
		<div id="apple2" class="apple" style="left:35px;top:35px"></div>
		<div id="apple3" class="apple" style="left:35px;top:35px"></div>
		<div id="body1" class="head" style="left:490px;top:315px"></div>
		<div id="body2" class="body" style="left:525px;top:315px"></div>
		<div id="body3" class="body" style="left:560px;top:315px"></div>
		<div id="body4" class="body" style="left:595px;top:315px"></div>		
	</div>
	<div id="play" class="play" onclick="begin()">
		<p id="text" style="position:absolute;top:-5px;left:50%;transform:translate(-50%,-50%);">PLAY</p>
	</div>
	<div style="position:fixed;top:20px;left:20px;width:100px;height:100px;font-size:60px" id="body_numbers">5</div>
	<div id="control" style="position:fixed;bottom:100px;right:100px;width:200px;height:200px;transform:rotate(45deg);opacity:0.2">
		<div style="position:absolute;left:0px;top:0px;width:90px;height:90px;background-color:#000;border:5px solid #eee;border-radius:15px" onclick="i_left=0;i_top=1;i_right=0;i_bottom=0;if (drect!='top'){loop('top')}"></div>
		<div style="position:absolute;left:0px;bottom:0px;width:90px;height:90px;background-color:#000;border:5px solid #eee;border-radius:15px" onclick="i_left=1;i_top=0;i_right=0;i_bottom=0;if (drect!='left'){loop('left')}"></div>
		<div style="position:absolute;right:0px;bottom:0px;width:90px;height:90px;background-color:#000;border:5px solid #eee;border-radius:15px" onclick="i_left=0;i_top=0;i_right=0;i_bottom=1;if (drect!='bottom'){loop('bottom')}"></div>
		<div style="position:absolute;right:0px;top:0px;width:90px;height:90px;background-color:#000;border:5px solid #eee;border-radius:15px" onclick="i_left=0;i_top=0;i_right=1;i_bottom=0;if (drect!='right'){loop('right')}"></div>
	</div>
</body>
</html>